require(['./config'], () => {
    require(['template', 'header', 'footer'], (template, header) => {
        class shopping {
            constructor() {
                this.renderList()
                this.checksChange()
                this.allCheckedState()
                this.allChecked()
                this.calcTotalPrice()
                this.remove()
                this.increaseCount()
                this.reduceCount()
            }
            renderList() {
                let cart = localStorage.getItem('cart')

                if (cart) {
                    this.cart = JSON.parse(cart)

                    $('#shoppingList').html(template('shoppingListTemp', {
                        cart: this.cart
                    }))

                } else {
                    $('.wrap').hide()
                    $('.noGoods').show()
                }
            }
            checksChange() {
                const _this = this

                $('.check').on('change', function () {

                    //找到当前的id，根据id修改选中状态
                    const id = $(this).parents('tr').attr('data-id')
                    _this.cart = _this.cart.map(shop => {
                        if (shop.id == id) shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.allCheckedState()
                    _this.calcTotalPrice()
                })

            }
            allCheckedState() {
                $('#allCheck').prop('checked', this.cart.every(shop => {
                    return shop.check
                }))
                this.calcTotalPrice()
            }
            allChecked() {
                const _this = this
                $('#allCheck').on('change', function () {
                    _this.cart = _this.cart.map(shop => {
                        shop.check = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    $('.check').each(function (index, shop) {
                        console.log($(shop))
                        $(shop).prop('checked', $('#allCheck').prop('checked'))
                    })
                    _this.calcTotalPrice()
                    // Jquery的each方法必须要传两个参数，第一个参数index为下标，
                    //第二个参数shop为元素，如果只设置了一个shop参数，遍历的时候，第一个元素不能遍历出来
                })


            }
            calcTotalPrice() {
                //总计根据实时的this.cart中获取
                //总计等于被选中数据的单价*数量的总和
                //所以在算总价之前害的判断商品是否被选中
                const totalPrice = this.cart.reduce((money, shop) => {
                    if (shop.check) money += shop.price * shop.count
                    return money
                }, 0)
                $('#totalPrice').html(totalPrice)
            }
            remove() {
                const _this = this
                $('body').on('click', '.delate', function () {
                    const id = $(this).parents('tr').attr('data-id')
                    _this.cart = _this.cart.filter(shop => {
                        return shop.id != id
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    $(this).parent().remove()
                    if (_this.cart.length == 0) {
                        localStorage.clear('cart')
                        _this.renderList()
                    }

                    _this.calcTotalPrice()
                })


            }
            increaseCount() {
                const _this = this
                $('body').on('click', '.jia', function () {
                    //console.log($('.jia'))
                    let id = $(this).parents('tr').attr('data-id')
                    console.log(id)
                    _this.cart = _this.cart.map(shop => {
                        if (id == shop.id) shop.count++
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalPrice()
                    _this.renderList()
                    _this.checksChange()
                })


            }
            reduceCount() {
                const _this = this
                $('body').on('click', '.jian', function () {

                    let id = $(this).parents('tr').attr('data-id')
                    console.log($(this).parents('tr'))
                    _this.cart = _this.cart.map(shop => {
                        if (id == shop.id) {
                            shop.count--
                            if (shop.count < 1) shop.count = 1

                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    _this.calcTotalPrice()
                    _this.renderList()
                    _this.checksChange()
                })
            }

        }
        new shopping()


    })

})